<template>
  <div class="rankingSongList">
    <!-- 排行榜播放信息 -->
    <div class="songListHeader">
      <div class="headerLeft">
        <span class="title">歌曲列表</span>
        <span class="songNum">{{ songListDetail.songNum }}首歌</span>
      </div>
      <div class="headerRight">
        <span>播放：</span>
        <span class="playCount">{{ songListDetail.playCount }}</span>
        <span>次</span>
      </div>
    </div>
    <!-- 歌曲排行表格 -->
    <table class="rankingSongTable">
      <thead>
        <tr>
          <th :width="isRanking ? '12%' : '12%'"></th>
          <th :width="isRanking ? '49%' : '40%'">
            {{ isRanking ? '标题' : '歌曲标题' }}
          </th>
          <th :width="isRanking ? '14%' : '16%'">时长</th>
          <th :width="isRanking ? '25%' : '13%'">歌手</th>
          <th v-if="!isRanking" width="19%">专辑</th>
        </tr>
      </thead>
      <tbody>
        <tr
          :class="{
            rankingHighTr: isRanking && index < 3,
            rankingLowTr: !isRanking || index >= 3
          }"
          v-for="(song, index) in newSongList"
          :key="song.id"
        >
          <!-- 第一列序号开始 -->
          <td class="rankingIndexTd" :width="isRanking ? '12%' : '12%'">
            <span class="rankingIndex">{{ index + 1 }}</span>
            <!-- 排行榜开始 -->
            <div v-if="isRanking">
              <div
                v-if="newCompareList[index] === 'new'"
                class="rankingCompareNew"
              />
              <div v-else class="rankingCompareNum">
                <div
                  :class="{
                    rankingCompareSameIcon: newCompareList[index] === 0,
                    rankingCompareUpIcon: newCompareList[index] > 0,
                    rankingCompareDownIcon: newCompareList[index] < 0
                  }"
                />
                <span
                  :class="{
                    rankingCompareSameNum: newCompareList[index] === 0,
                    rankingCompareUpNum: newCompareList[index] > 0,
                    rankingCompareDownNum: newCompareList[index] < 0
                  }"
                  >{{ Math.abs(newCompareList[index]) }}</span
                >
              </div>
            </div>
            <!-- 排行榜结束 -->
            <!-- 非排行榜开始 -->
            <el-tooltip
              effect="dark"
              content="播放当前歌曲"
              placement="bottom"
              :visible-arrow="false"
              :open-delay="500"
              :offset="100"
            >
              <div
                v-if="!isRanking"
                class="songPlayerIcon"
                @click="handlePlay(song.id)"
              />
            </el-tooltip>
            <!-- 非排行榜结束 -->
          </td>
          <!-- 第一列序号结束 -->
          <!-- 第二列歌曲标题开始 -->
          <td class="rankingTitleTd" :width="isRanking ? '49%' : '40%'">
            <img
              v-if="isRanking && index < 3"
              class="songImg"
              :src="song.al.picUrl"
            />
            <el-tooltip
              effect="dark"
              content="播放当前歌曲"
              placement="bottom"
              :visible-arrow="false"
              :open-delay="500"
              :offset="100"
            >
              <div
                v-if="isRanking"
                class="songPlayerIcon"
                @click="handlePlay(song.id)"
              />
            </el-tooltip>
            <el-tooltip
              effect="dark"
              :content="song.name"
              placement="bottom"
              :visible-arrow="false"
              :open-delay="500"
              :offset="100"
            >
              <span
                v-if="isRanking"
                :class="{
                  rankingTitleSongNameShort: index < 3,
                  rankingTitleSongNameLong: index >= 3
                }"
                >{{ song.name }}</span
              >
              <span v-else class="rankingTitleSongNameMiddle">{{
                song.name
              }}</span>
            </el-tooltip>
            <el-tooltip
              effect="dark"
              content="播放当前歌曲MV"
              placement="bottom"
              :visible-arrow="false"
              :open-delay="500"
              :offset="100"
            >
              <div v-if="song.mv" class="songVideoIcon" />
            </el-tooltip>
          </td>
          <!-- 第二列歌曲标题结束 -->
          <!-- 第三列时长开始 -->
          <td class="rankingTimeTd" :width="isRanking ? '14%' : '16%'">
            <span>{{
              Math.floor(song.dt / 1000 / 60)
                .toString()
                .padStart(2, '0') +
              ':' +
              Math.floor((song.dt / 1000) % 60)
                .toString()
                .padStart(2, '0')
            }}</span>
            <div class="rankingController">
              <el-tooltip
                effect="dark"
                content="添加到播放列表"
                placement="bottom"
                :visible-arrow="false"
                :open-delay="500"
                :offset="100"
              >
                <div class="rankingIconPlus"></div>
              </el-tooltip>
              <el-tooltip
                effect="dark"
                content="收藏"
                placement="bottom"
                :visible-arrow="false"
                :open-delay="500"
                :offset="100"
              >
                <div class="rankingIconCollect"></div>
              </el-tooltip>
              <el-tooltip
                effect="dark"
                content="分享"
                placement="bottom"
                :visible-arrow="false"
                :open-delay="500"
                :offset="100"
              >
                <div class="rankingIconShare"></div>
              </el-tooltip>
              <el-tooltip
                effect="dark"
                content="下载"
                placement="bottom"
                :visible-arrow="false"
                :open-delay="500"
                :offset="100"
              >
                <div class="rankingIconDownload"></div>
              </el-tooltip>
            </div>
          </td>
          <!-- 第三列时长结束 -->
          <!-- 第四列歌手开始 -->
          <td class="rankingSingerPublic" :width="isRanking ? '25%' : '13%'">
            <div
              :class="{
                rankingSingerLong: isRanking,
                rankingSingerShort: !isRanking
              }"
            >
              <span v-for="(ar, arIndex) in song.ar" :key="arIndex">
                <el-tooltip
                  effect="dark"
                  :content="
                    song.ar
                      .map((item) => {
                        return item.name
                      })
                      .join('/')
                  "
                  placement="bottom"
                  :visible-arrow="false"
                  :open-delay="500"
                  :offset="100"
                >
                  <span class="rankingSingerName">{{ ar.name }}</span>
                </el-tooltip>
                <span v-if="arIndex + 1 < song.ar.length">/</span>
              </span>
            </div>
          </td>
          <!-- 第四列歌手结束 -->
          <!-- 第五列专辑开始 -->
          <td v-if="!isRanking" class="rankingAblumTd" width="19%">
            <el-tooltip
              effect="dark"
              :content="song.al.name"
              placement="bottom"
              :visible-arrow="false"
              :open-delay="500"
              :offset="100"
            >
              <span>{{ song.al.name }}</span>
            </el-tooltip>
          </td>
          <!-- 第五列专辑结束 -->
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'SongList',
  data() {
    return {
      // 是否已登录，假设已登录
      isLogin: true
    }
  },
  props: {
    /**
     * 接收参数isRanking 决定列表是否是排行榜列表，
     * true则为排行榜列表，只显示4列，
     * false则不是排行榜列表，显示5列,并需要判断是否登录isLogin，
     *    若isLogin为ture，则已登录，显示所有歌曲
     *    若isLogin为false，则未登录，只显示10条歌曲
     * */
    isRanking: {
      type: Boolean,
      default: true
    },
    /**
     * 接收一个对象songListDetail = [
     *    songNum //歌曲数量
     *    playCount //播放次数
     * ]
     * */
    songListDetail: {
      type: Object,
      default: () => ({})
    },
    // 接收的要渲染的歌曲列表songList
    songList: {
      type: Array,
      default: () => [
        /**
         * 数据结构如下：
         *  id //歌曲id
         *  name // 歌曲名
         *  al:{
         *    picUrl //歌曲图片
         *  }
         *  ar:[
         *      {
         *      id //歌手id
         *      name //歌手名字
         *    }
         *  ]
         *  dt //时长
         *  mv //歌曲mv的id，此属性有值则说明此歌曲有mv，此属性为
         *        null则说明此歌曲无mv
         */
      ]
    },
    // 接收要渲染的排名变化的列表
    compareList: {
      type: Array,
      default: () => [
        /**
         * 数据结构如下：
         * {
         *    lr // 更新前的排名,此属性可选，有此属性说明不是新歌，无此属性
         *          说明是新歌，没有排名的变化，只显示new
         * }
         *
         */
      ]
    }
  },
  computed: {
    // 非排行榜列表时，判断是否已登录，未登录时只展示10首歌曲
    newSongList() {
      if (!this.isLogin) {
        return this.songList.slice(0, 10)
      }
      return this.songList
    },
    // 计算过后的更新后排名变化
    newCompareList() {
      return this.compareList.map((item, index) => {
        if (item.lr) {
          item = item.lr - index
        } else {
          item = 'new'
        }
        return item
      })
    }
  },
  methods: {
    ...mapActions('player', ['getSong']),
    // 点击播放按钮
    handlePlay(id) {
      this.getSong(id)
    }
  }
}
</script>

<style lang="less" scoped>
.rankingSongList {
  margin-top: 40px;
  width: 100%;
  // 排行榜播放信息
  .songListHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .headerLeft {
      .title {
        margin-right: 20px;
        font-size: 20px;
      }
      .songNum {
        color: #666;
      }
    }
    .headerRight {
      .playCount {
        margin-right: 5px;
        color: #c60c0c;
        font-weight: 600;
      }
    }
  }
  // 歌曲排行表格
  .rankingSongTable {
    margin-top: 5px;
    width: 100%;
    border-top: 2px solid #c20c0c;
    border-bottom: 1px solid #d9d9d9;
    border-collapse: collapse;
    thead {
      tr {
        height: 36px;
        background: url('../assets/images/table.png') left top;
        th {
          padding-left: 10px;
          text-align: start;
          font-weight: normal;
          color: #666;
          border-right: 1px solid #d9d9d9;
          border-left: 1px solid #d9d9d9;
        }
      }
    }
    tbody {
      tr {
        // 适配非排名榜单列表
        // 排名榜单前1-3行高表格
        &.rankingHighTr {
          height: 70px;
          line-height: 70px;
        }
        // 排名榜单第3行以后或非排名榜单表格每行矮表格
        &.rankingLowTr {
          height: 30px;
          line-height: 30px;
        }
        border-left: 1px solid #d9d9d9;
        border-right: 1px solid #d9d9d9;
        // 斑马纹样式
        &:nth-child(odd) {
          background: #f7f7f7;
        }
        &:nth-child(even) {
          background: #fff;
        }
        td {
          padding-left: 10px;
          // height: 70px;
          // line-height: 70px;
          // 排序
          .rankingIndex {
            color: #999;
          }
          // 同比提升
          .rankingCompareNew {
            height: 10px;
            width: 20px;
            background: url('../assets/images/icon.png') right -286px no-repeat;
          }
          .rankingCompareNum {
            display: flex;
            align-items: center;
            width: 27px;
            height: 15px;
            // 同比上升
            .rankingCompareUpIcon {
              width: 12px;
              height: 15px;
              background: url('../assets/images/icon.png') right -300px no-repeat;
            }
            .rankingCompareUpNum {
              margin-right: 0;
              color: #c12128;
              font-family: Arial, Helvetica, sans-serif;
            }
            // 同比下降
            .rankingCompareDownIcon {
              width: 12px;
              height: 15px;
              background: url('../assets/images/icon.png') right -319px no-repeat;
            }
            .rankingCompareDownNum {
              margin-right: 0;
              color: #4ab8ea;
              font-family: Arial, Helvetica, sans-serif;
            }
            // 同比相等
            .rankingCompareSameIcon {
              width: 12px;
              height: 15px;
              background: url('../assets/images/icon.png') right -270px no-repeat;
            }
            .rankingCompareSameNum {
              margin-right: 0;
              color: #999;
              font-family: Arial, Helvetica, sans-serif;
            }
          }
          // 图片
          .songImg {
            margin-right: 15px;
            vertical-align: middle;
            height: 50px;
            width: 50px;
          }
          // 播放器
          .songPlayerIcon {
            display: inline-block;
            margin-right: 10px;
            vertical-align: middle;
            height: 16.5px;
            width: 16.5px;
            background: url('../assets/images/table.png') left -103px no-repeat;
            border-radius: 50%;
            cursor: pointer;
            &:hover {
              background: url('../assets/images/table.png') left -128px no-repeat;
            }
          }
          // 歌曲名名称省略
          // 排行榜第1-3行歌曲名省略长度
          .rankingTitleSongNameShort {
            display: inline-block;
            vertical-align: middle;
            height: 20px;
            line-height: 20px;
            max-width: 185px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          // 排行榜第3行后歌曲名省略长度
          .rankingTitleSongNameLong {
            display: inline-block;
            vertical-align: middle;
            height: 20px;
            line-height: 20px;
            max-width: 250px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          // 非排行榜每行歌曲名省略长度
          .rankingTitleSongNameMiddle {
            display: inline-block;
            vertical-align: middle;
            height: 20px;
            line-height: 20px;
            max-width: 215px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          // 歌曲控制器
          .rankingController {
            display: none;
            height: 14px;
            width: 80px;
            // 添加
            .rankingIconPlus {
              height: 14px;
              width: 18px;
              background: url('../assets/images/icon.png') left -700px no-repeat;
              &:hover {
                background: url('../assets/images/icon.png') -22px -700px
                  no-repeat;
              }
            }
            // 收藏
            .rankingIconCollect {
              height: 14px;
              width: 21px;
              background: url('../assets/images/table.png') left -174px no-repeat;
              &:hover {
                background: url('../assets/images/table.png') -20px -174px
                  no-repeat;
              }
            }
            // 分享
            .rankingIconShare {
              height: 14px;
              width: 21px;
              background: url('../assets/images/table.png') left -195px no-repeat;
              &:hover {
                background: url('../assets/images/table.png') -20px -195px
                  no-repeat;
              }
            }
            // 下载
            .rankingIconDownload {
              height: 14px;
              width: 20px;
              background: url('../assets/images/table.png') -81px -174px
                no-repeat;
              &:hover {
                background: url('../assets/images/table.png') -104px -174px
                  no-repeat;
              }
            }
          }
          span {
            vertical-align: middle;
            margin-right: 5px;
            font-size: 12px;
          }
          // 视频播放器
          .songVideoIcon {
            display: inline-block;
            vertical-align: middle;
            height: 17px;
            width: 23px;
            background: url('../assets/images/table.png') left -151px no-repeat;
            cursor: pointer;
            &:hover {
              background: url('../assets/images/table.png') -30px -151px
                no-repeat;
            }
          }
        }
        // 排名
        .rankingIndexTd {
          display: flex;
          justify-content: space-around;
          align-items: center;
          padding: 0;
          width: 100%;
        }
        // 要对其行内元素和行内块元素居中对其的表格
        .rankingTitleTd {
          font-size: 0;
          span {
            cursor: pointer;
            &:hover {
              text-decoration: underline;
            }
          }
        }
        // 要对控制器显示隐藏的表格
        .rankingTimeTd {
          span {
            vertical-align: baseline;
          }
          &:hover .rankingController {
            display: flex;
            align-items: center;
          }
          &:hover span {
            display: none;
          }
        }
        // 要对歌手名称进行省略操作的表格
        // 不同表单公共样式
        .rankingSingerPublic {
          font-size: 0;
          div {
            display: inline-block;
            height: 20px;
            line-height: 20px;
            vertical-align: middle;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .rankingSingerName {
            color: #333;
            &:hover {
              text-decoration: underline;
              cursor: pointer;
            }
          }
          span {
            margin-right: 0;
            vertical-align: baseline;
          }
        }
        // 排行榜表格
        .rankingSingerLong {
          max-width: 150px;
        }
        // 非排行榜表格
        .rankingSingerShort {
          max-width: 70px;
        }
        // 要对专辑进行操作的表格,只有非排行榜才生效
        .rankingAblumTd {
          font-size: 0;
          span {
            display: inline-block;
            height: 20px;
            line-height: 20px;
            max-width: 110px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>
